<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用访问器访问数据</title>
</head>
<body>
    
</body>
<script>
    let obj = {
        name:'jimmy',
        age:22,
        getname(){
            console.log(this.name)
        },
        setname(name){
            this.name = name
        }
    }
    obj.setname('xuexue')
    obj.getname()  //xuexue

    obj.name = 'jimmyxuexue'
    obj.getname()  //jimmyxuexue
    // 如上例子  外界可以很容易的就修改对象内部的属性 这个是我们不希望看到的 
    // 所以我们引入了抽象的概念
    let obj2 = {
        data:{
            name:'jimmy',
            age:22
        },
        setname(name){
            this.data.name = name
        },
        getname(){
            console.log(this.data.name)
        }
    }
    obj2.setname('xuexue')
    obj.name = 18
    obj2.getname() //xuexue
    // 可见 使用抽象了以后是解决了之前的那个问题，  但是其实还可以更加的方便 -- 使用访问器
    let obj3 = {
        data:{
            name:'jimmy',
            age:22
        },
        set name(name){
            this.data.name = name
        },
        get name(){
            return this.data.name
        }
    }
    // 注意  使用访问器了以后 这些都不是方法了  本质上变成来 属性
    obj3.name = 'xuexue'
    console.log(obj3.name) //xuexue

</script>
</html>